<template>
	<view>
		<!-- <nav-bar title="卡项收益"></nav-bar> -->
		<scroll-view scroll-y :style="{ height: mainHeight }">
			<!-- <view class="content"><tab-index @tabClick="tabClick"></tab-index></view> -->
			<!--  <view class="time-box">
        <view class="text">时间</view>
        <view class="date">
          <uni-datetime-picker :clear-icon="false" v-model="range" type="daterange" @change="maskClick" />
        </view>
       
      </view> -->
			<view class="tab-list">
				<view v-for="(item, index) in tabData" :key="index"
					:class="['tab-box', activeIndex === index ? 'active' : 'tab']" @click="handelClick(item, index)">
					<view>{{ item.name }}</view>
				</view>
			</view>

			<!-- <view class="table" v-if="activeIndex === 0">
        <view class="head">
          <view style="width: 25%;">项目分类</view>
          <view style="width: 25%;">项目名称</view>
          <view style="width: 50%;">我服务的项目次数</view>
        </view>
        <view class="box" v-for="(item, index) in tableData" :key="index">
          <view style="width: 25%;">{{ item.name }}</view>
          <view style="width: 25%;">{{ item.phone }}</view>
          <view style="width: 50%;">{{ item.number }}次</view>
        </view>
      </view> -->
			<!-- <view v-else> -->
			<view class="project-table" v-for="(item, index) in projectData" :key="index">
				<view class="earn">
					<view class="title">{{ item.belongStoreName }}</view>
					<view class="project">订单号：{{ item.orderId }}</view>
				</view>
				<view class="earn">
					<view class="money">
						<view class="title">储值卡</view>
						<!-- <view class="project">充值金额：500元</view> -->
					</view>
					<view class="project">支付时间：{{ item.createTime }}</view>
					<!-- <view class="project">{{ item.time }}</view> -->
				</view>
				<view class="earn" style="border-bottom: none;padding-bottom: 0;">
					<view class="project">收益：<span style="color: #01B960;">{{ item.earnings }}元</span></view>
					<!-- <view class="project">包间收益：<span style="color: #01B960;">{{ item.earn }}元</span></view>
            <view class="project">附加商品收益：<span style="color: #01B960;">{{ item.earn }}元</span></view> -->
				</view>

			</view>
			<!-- </view> -->
		</scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/index.vue'
	import tabIndex from '../../components/statis/tab-index.vue'
	import {
		getRechargeData,
		getMemberData
	} from '@/api/system/static'
	export default {
		name: 'cardEarning',
		components: {
			NavBar,
			tabIndex
		},
		data() {
			return {
				mainHeight: '',
				activeIndex: 0,
				range: [],
				tabData: [{
						name: '充值收益'
					},
					{
						name: '会员收益'
					}
				],
				beginTime: '2023.5.30',
				endTime: '2023.5.30',
				thisMonth: '',
				createTime: '',
				tableData: [{
						name: '哈哈哈',
						phone: '18771319801',
						number: '20',
						times: '3',
						type: 1
					},
					{
						name: '哈哈哈',
						phone: '18771319801',
						number: '20',
						times: '3',
						type: 1
					},
					{
						name: '哈哈哈',
						phone: '18771319801',
						number: '20',
						times: '3',
						type: 1
					},
					{
						name: '哈哈哈',
						phone: '18771319801',
						number: '20',
						times: '3',
						type: 1
					}
				],
				projectData: [],

			}
		},
		watch: {
			range(newval) {
			}
		},
		created() {
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
		},
		onLoad(option) {
			this.thisMonth = option.monthTime
			this.createTime = option.createTime
			const params = {
				monthTime: this.thisMonth,
				createTime: this.createTime
			}
			this.getRechargeData(params)
		},
		methods: {
			getRechargeData(params) {
				getRechargeData(params).then((res) => {
					this.projectData = res.rows
				})
			},
			getMemberData(params) {
				getMemberData(params).then((res) => {
					this.projectData = res.rows
				})
			},
			tabClick(item) {
			},
			handelClick(item, index) {
				this.activeIndex = index
				const params = {
					monthTime: this.thisMonth,
					createTime: this.createTime
				}
				if (this.activeIndex === 0) {
					this.getRechargeData(params)
				} else {
					this.getMemberData(params)
				}
			},
			maskClick(e) {
				if (this.activeIndex === 0) {
					this.getRechargeData()
				} else {
					this.getMemberData()
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
	}

	.tab-list {
		display: flex;
		justify-content: space-around;
		margin-top: 25rpx;
		border-bottom: 1rpx solid #d3d3d3;

		.tab-box {
			padding-bottom: 10rpx;
		}

		.active {
			font-size: 45rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			color: #333333;
			border-bottom: 1rpx solid #C27E15;
		}

		.tab {
			font-size: 41rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #666666;
		}
	}

	.time-box {
		margin-top: 20rpx;
		padding: 0 30rpx;
		display: flex;

		.text {
			font-size: 36rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			margin-right: 20rpx;
			line-height: 68rpx;
		}

		.time-list {
			display: flex;
			height: 68rpx;
			background-color: #fff;
			line-height: 68rpx;
			border-radius: 12rpx;
			font-size: 36rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			padding: 0 30rpx;

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 10rpx;
			}
		}
	}

	.project-table {
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		opacity: 1;
		margin: 25rpx 30rpx;
		padding: 10rpx 0 20rpx;

		.earn {
			padding: 15rpx 30rpx 17rpx;
			border-bottom: 1rpx solid #f8f8f8;

			.money {
				display: flex;
				justify-content: space-between;
			}
		}

		.title {
			font-size: 42rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			color: #333333;
			margin-bottom: 15rpx;

		}

		.project {
			font-size: 38rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-bottom: 10rpx;
		}
	}
</style>